import { history } from "umi";
import CustomAlert from "@/components/customAlert";
import Info from "@/assets/image/icons/info.svg";
import CustomResult from "@/components/customResult";
import Successful from "@/assets/image/Property 1=Successful.png";
import { CustomTitle } from "@/components/customTitle";
import { PaddingContent } from "@/components/page-padding";
import Calendar from "@/assets/image/icons/calendar.svg";
import "./index.less";

const Successfully = () => {
  const onClick = () => {
    history.push("/mybooking-records");
  };
  return (
    // <CustomSuccessfully
    //   title={"Create Daily Booking"}
    //   icon={submission}
    //   topText={"Booking Successfully"}
    //   middleText={text}
    //   btnText={"Back to My Booking Record"}
    // />
    <PaddingContent className="register-month-container">
      <div className="title">
        <CustomTitle>Register Monthly Ballot</CustomTitle>
        <div className="register-Month">
          <span>September 2024</span>
          <img src={Calendar} alt="svg"></img>
        </div>
      </div>
      <CustomResult
        icon={Successful}
        resultTitle="Booking Successfully"
        resultSubTitle="Your booking has been submitted successfully."
        extra={
          <div style={{ marginBottom: "32px" }}>
            <CustomAlert
              message="Octopus Card Required for Parking"
              type="info"
              showIcon={true}
              icon={Info}
              description={
                "Please be reminded that you must bring the Octopus Card you registered with for this booking to enter the car park. If you are unable to present this card, you will not be able to access your parking reservation."
              }
            />
          </div>
        }
        btnText="Back to My Booking Record"
        onClick={onClick}
      />
    </PaddingContent>
  );
};

export default Successfully;
